<template>
  <!-- <div id="allmap"> -->
  <baidu-map
    class="map"
    :scroll-wheel-zoom="true"
    :center="location"
    :zoom="zoom"
    ak="TUdnPWT0yQqTcQbfsm1b0XRHS82RGmBF"
    @zoomend="zoomEnd"
    auto-resize
  >
    <!-- 地图显示容器 -->
    <bm-view style="height: 100% !important;"></bm-view>
    <!-- 缩放控件 -->
    <!-- <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation> -->
    <!-- 地图类型 -->
    <bm-map-type
      :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
      anchor="BMAP_ANCHOR_TOP_RIGHT"
    />
    <!-- 人员标记点 -->
    <bm-marker
      v-for="(item,index) in iconUrl"
      :key="index+ 'only'"
      :position="{lng: item.LONGITUDE, lat: item.LATITUDE}"
      :icon="{url: item.ICONURL, size: {width: 30, height: 30}}"
    >
      <bm-label
        :content="item.NAME"
        :labelStyle="{color: 'red', fontSize : '1px', border: '0 none'}"
        :offset="{width: 30, height: 0}"
        v-if="markerShow"
      />
    </bm-marker>
    <!-- 人员信息窗体 -->
    <bm-info-window
      ref="kk"
      :position="{lng: infoWindow.lng, lat: infoWindow.lat}"
      :show="infoWindow.show"
      title="人员信息"
      @close="infoWindow.isShow = false"
    >
      <p>姓名：{{infoWindow.NAME}}</p>
      <p>班组：{{infoWindow.CLIENT_NAME}}</p>
      <p>经度：{{infoWindow.lng}}</p>
      <p>纬度：{{infoWindow.lat}}</p>
    </bm-info-window>
    <!-- 报警标记点 -->
    <bm-marker
      :position="{lng: warningMark.lng, lat: warningMark.lat}"
      :icon="{url: warningMark.ICONURL, size: {width: 30, height: 30}}"
    />
    <!-- 报警信息窗体 -->
    <bm-info-window
      :position="{lng: warningMark.lng, lat: warningMark.lat}"
      :show="warningMark.show"
      :title="warningMark.NAME"
      @close="warningMark.isShow = false"
    >
      <p>报警类型：{{warningMark.ALARM_TYPE}}</p>
      <p>报警时间：{{warningMark.ALARM_DATE}}</p>
    </bm-info-window>

    <!-- 区域划分 -->
    <!-- 班组区域 -->
    <bm-polygon
      v-if="groupShow"
      :path="groupPolygonPath"
      stroke-color="red"
      :stroke-opacity="1"
      :stroke-weight="2"
      @click="polygonHandle"
    />
    <bm-label
      v-show="groupShow"
      v-for="(item,index) in groupPolygonPath"
      :key="index+'only'"
      :content="item.NAME"
      :position="{lng: item.lng, lat: item.lat}"
      :labelStyle="{color: 'red', display: groupShow ? 'block' : 'none'}"
      :offset="{width: -34, height: 8}"
    />
    <!-- 清扫队区域 -->
    <bm-polygon
      v-if="clearShow"
      :path="clearPolygonPath"
      stroke-color="blue"
      :stroke-opacity="1"
      :stroke-weight="2"
      @click="polygonHandle"
    />
    <bm-label
      v-show="clearShow"
      v-for="(item,index) in clearPolygonPath"
      :key="index+'only'"
      :content="item.NAME"
      :position="{lng: item.lng, lat: item.lat}"
      :labelStyle="{color: 'red', display: clearShow ? 'block' : 'none'}"
      :offset="{width: -34, height: -10}"
    />
    <!-- 人员图例 -->
    <!-- <div class="person_legend">
      <h3>图 例</h3>
      <p>
        <span class="group">
          <img :src="legend.teamLeader" alt />
        </span>
        <span>班组长</span>
      </p>
      <p>
        <span class="clear">
          <img :src="legend.workers" alt />
        </span>
        <span>环卫工</span>
      </p>
    </div> -->
    <!-- 状态图例 -->
    <!-- <div class="status_legend"> -->
      <!-- <span>状态</span> -->
      <!-- <span class="public online"></span>
      <span>在线({{status.onlines}})</span>
      <span class="public outline"></span>
      <span>离线({{status.outlines}})</span>
      <span class="public warning"></span>
      <span>报警({{warningNum}})</span> -->
    <!-- </div> -->
  </baidu-map>
  <!-- </div> -->
</template>

<script>

import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BaiduView from 'vue-baidu-map/components/map/MapView.vue'
// import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
import MapType from 'vue-baidu-map/components/controls/MapType'
import Label from 'vue-baidu-map/components/overlays/Label'

import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'

import teamLeaderOnline from '@/assets/team-Leader-online.png'
import teamLeaderOutline from '@/assets/team-Leader-outline.png'
import workersOnline from '@/assets/workers-online.png'
import workersOutline from '@/assets/workers-outline.png'
import warningMark from '@/assets/warning-mark.png'
import eventBus from '@/eventBus.js'

export default {
  components: {
    'baidu-map': BaiduMap,
    'bm-view': BaiduView,
    // 'bm-navigation': BmNavigation,
    'bm-map-type': MapType,
    'bm-label': Label,
    BmMarker,
    BmInfoWindow
  },
  data () {
    return {
      // mapHeight: '',
      location: {
        lng: 117.2,
        lat: 39.15
      },
      zoom: 12.5,
      addressKeyword: '天津',
      value: [],
      status: {},
      groupPolygonPath: [],
      clearPolygonPath: [],
      isShow: false,
      iconUrl: [],
      groupShow: false,
      clearShow: false,
      legend: {
        teamLeader: teamLeaderOnline,
        workers: workersOnline
      },
      warningNum: 0,
      // 信息窗体
      infoWindow: {
        lng: 0,
        lat: 0,
        show: false,
        isShow: false
      },
      // 标记点文字显示
      markerShow: false,
      // 报警地点
      warningMark: {
        lng: 0,
        lat: 0,
        NAME: '',
        ALARM_TYPE: '',
        ALARM_DATE: '',
        ICONURL: warningMark,
        show: false,
        isShow: false
      }
    }
  },
  created () {
    eventBus.$on('mapData1', val => {
      this.status = val
    })
    eventBus.$on('showGroupArea', message => {
      this.getGroupArea(message)
      this.groupShow = true
    })
    eventBus.$on('showClearArea', message => {
      this.getClearArea(message)
      this.clearShow = true
    })
    // 清除区域
    eventBus.$on('clearArea', () => {
      this.clearShow = false
      this.groupShow = false
    })
    // 报警数量
    eventBus.$on('warningNum', val => {
      this.warningNum = val
    })
    // 双击人员列表某一行时，改变地图中心
    eventBus.$on('mapLocaltion', val => {
      this.warningMark.show = false
      // this.zoom = 13
      this.location.lat = val.LATITUDE
      this.location.lng = val.LONGITUDE
      setTimeout(() => {
        this.infoWindow.show = true
      }, 100)
      // this.infoWindow.show = true
      this.infoWindow.NAME = val.NAME
      this.infoWindow.CLIENT_NAME = val.CLIENT_NAME
      this.infoWindow.lat = val.LATITUDE
      this.infoWindow.lng = val.LONGITUDE
    })
    // 双击报警列表某一行时，改变地图中心
    eventBus.$on('warningItem', val => {
      // this.warningMark.NAME = ''
      // this.warningMark.ALARM_TYPE = ''
      // this.warningMark.ALARM_DATE = ''

      this.infoWindow.show = false
      // this.warningMark.isShow = false
      this.zoom = 13
      this.location.lat = val.LATITUDE
      this.location.lng = val.LONGITUDE
      // 显示报警地点和报警信息
      this.warningMark.show = true
      this.warningMark.lng = val.LONGITUDE
      this.warningMark.lat = val.LATITUDE
      this.warningMark.NAME = val.NAME
      this.warningMark.ALARM_TYPE = val.ALARM_TYPE
      this.warningMark.ALARM_DATE = val.ALARM_DATE
      // setImmediate(() => {
      //   this.warningMark.show = true
      // }, 200)
    })
    // 开始跟踪
    eventBus.$on('Tracking', val => {
      this.infoWindow.isShow = val.isShow
      this.infoWindow.NAME = val.NAME
      this.infoWindow.CLIENT_NAME = val.CLIENT_NAME
      this.infoWindow.lat = val.LATITUDE
      this.infoWindow.lng = val.LONGITUDE
      this.location.lng = val.LONGITUDE
      this.location.lat = val.LATITUDE
    })

    // eventBus.$on('mapSize', val => this.mapHeight = 568 + val)
    // console.log(this.mapHeight)
  },
  mounted () {
    // eventBus.$on('mapSize', val => this.mapHeight = 'height: ' + (645 + val) + 'px')
    // this.location.lng = 117.2

    eventBus.$on('mapData2', message => {
      this.iconUrl = message.map(item => {
        if (item.WORKTYPE === '班组长') {
          if (item.ONLINE === 1) item.ICONURL = teamLeaderOnline
          if (item.ONLINE === 0) item.ICONURL = teamLeaderOutline
        }
        if (item.WORKTYPE === '环卫工') {
          if (item.ONLINE === 1) item.ICONURL = workersOnline
          if (item.ONLINE === 0) item.ICONURL = workersOutline
        }
        return item
      })
    })
  },
  methods: {
    // 班组区域
    async getGroupArea (ClientNo) {
      this.groupPolygonPath = []
      const { data } = await this.$Http.get(`/DataListCompany/GetTeamAreaApi?ClientNo=${ClientNo}`)
      let x = 0
      let y = 0
      this.groupPolygonPath = data.map(item => {
        item.lng = item.LONGITUDE
        item.lat = item.LATITUDE
        x += item.LONGITUDE
        y += item.LATITUDE
        delete item.LONGITUDE
        delete item.LATITUDE
        return item
      })
      this.location.lng = x / this.groupPolygonPath.length
      this.location.lat = y / this.groupPolygonPath.length
    },
    // 清扫队区域
    async getClearArea (ClientNo) {
      this.clearPolygonPath = []
      const { data } = await this.$Http.get(`/DataListCompany/GetCleanTeamAreaApi?ClientNo=${ClientNo}`)
      let x = 0
      let y = 0
      this.clearPolygonPath = data.map((item, index) => {
        item.lng = item.LONGITUDE
        item.lat = item.LATITUDE
        x += item.LONGITUDE
        y += item.LATITUDE
        delete item.LONGITUDE
        delete item.LATITUDE
        return item
      })
      this.location.lng = x / this.groupPolygonPath.length
      this.location.lat = y / this.groupPolygonPath.length
    },
    // 点击多边形触发函数
    polygonHandle (e) {
      this.isShow = !this.isShow
    },
    // 人员信息窗体
    infoWindowOpen () {
      this.infoWindow.isShow = false
      this.infoWindow.isShow = true
    },
    // 报警信息窗体
    warningMarkOpen () {
      this.warningMark.isShow = false
      this.warningMark.isShow = true
    },
    // 获取百度地图缩放级别,显示标记点信息
    zoomEnd (e) {
      this.zoom = e.target.getZoom()
      if (this.zoom > 13) this.markerShow = true
      if (this.zoom <= 13) this.markerShow = false
    }
  }
}
</script>

<style scoped lang="less">
// #allmap {
// position: relative;
// height: 100%;
.map {
  position: relative;
  height: calc(100% - 52px);
}
.person_legend {
  width: 100px;
  height: 110px;
  position: absolute;
  right: 10px;
  bottom: 40px;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  h3 {
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #333;
  }
  p {
    height: 30px;
    text-align: center;
    color: #333;
    &:nth-child(2) {
      margin-bottom: 10px;
    }
    span:first-child {
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-right: 5px;
      vertical-align: middle;
      img {
        background-size: 30px 30px;
      }
    }
  }
}
.status_legend {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding-right: 10px;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  .public {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 10px;
    margin-right: 2px;
  }
  .online {
    background-color: #1afa29;
  }
  .outline {
    background-color: blue;
  }
  .warning {
    background-color: red;
  }
}
// }
</style>
